<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>最有字节范</title>
    <link rel="stylesheet" href="css/css.min.css?c8">
    <link rel="stylesheet" href="lib/animate.min.css">
    <link rel="stylesheet" href="lib/swiper.min.css">
    <script src="lib/vue.min.js"></script>
    
</head>

<body>
    <div class="container" id="app" :style="{backgroundImage:'url(' + bg_img + ')'}">
        <!-- loading -->
        <div class="section" id="loading" v-show="scene == 0">
            <div class="warp">
                <div class="content">
                    <div class="ele-loading"></div>
                    <div class="music"></div>
                </div>
            </div>
        </div>

        <!--档案馆-->
        <div class="section" id="scene-1" v-show="scene == 1">
            <div class="warp">
                <div class="content">
                    <img :src="logo_img" class="ele-logo" alt="">
                    <div class="music"></div>
                    <!-- <div class="title"></div> -->
                    <div class="lan-btn" v-if="initLang == 'cnen'" :class="lang" @click="change_lang"></div>
                    <div class="title">
                        <div class="team">{{title}}</div>
                        <div class="tip" v-if="sub_title != ''">{{sub_title}}</div>
                    </div>
                    <div class="item" v-if="banner1.length">

                        <div class="swiper-container banner" id="swiper-banner">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="item in banner1"><a :href="item.href_url"><img
                                            class="face" :src="item.img_url" alt=""></a></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>

                        <div class="caption" v-if="banner1.length">{{banner1[banner_swiper_current].title}}</div>
                    </div>
                    <div class="item" v-if="banner2.length">
                        <div class="banner">
                            <a :href="banner2[0].href_url"><img class="face" :src="banner2[0].img_url" alt=""></a>
                        </div>
                        <div class="caption">{{banner2[0].title}}</div>
                    </div>
                    <div class="item" v-if="banner3.length">
                        <div class="banner">
                            <img id="go-list" class="face" :src="banner3[0].img_url" @click="change_scene(2)" alt="">
                        </div>
                        <div class="caption">{{banner3[0].title}}</div>
                    </div>
                </div>
            </div>
        </div>



        <!--获奖名单-->
        <div class="section" id="scene-2" v-show="scene == 2">
            <div class="warp">
                <div class="content">
                    <!-- <div class="ele-logo"></div> -->
                    <div class="back" @click="change_scene(1)"></div>
                    <div class="music"></div>
                    <div class="title" v-if="rosters.length > 0">
                        <!-- <div class="year">{{selected}}年</div> -->
                        <div class="tip">{{title}}</div>
                        <div class="tip2" v-if="sub_title != ''">{{sub_title}}</div>
                        <div class="month">{{lang == 'cn' ? '获奖名单':'Award-winning ByteDancers'}}</div>
                    </div>


                    <select class="year-box" name="year" id="" v-if="select_years.length > 0"
                        @change="getSelectYear(selected)" v-model="selected">
                        <option :value="item" v-for="item in select_years">{{item}}</option>
                    </select>

                    <!-- <div class="month-text" v-if="rosters.length > 0">{{rosters[swiper_current].month}}双月</div> -->
                    <div class="swiper-container" id="swiper-department">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(roster,i) in rosters" :key="i">
                                <div class="month-text">{{roster.month}}{{lang == 'cn' ? '双月' : ''}}</div>
                                <div class="scroll-box">
                                    
                                    <div class="department" v-for="(r,idx) in roster.list" :key="idx">
                                        <div class="branch">
                                            <span>{{r.dept}}</span>
                                        </div>
                                        <div class="gather">
                                            <div class="gather-item" v-for="(p,index) in r.plist" :key="index">
                                                <div class="dept2" v-if="p.dept2 != ''">{{p.dept2}}</div>
                                                <div class="item" @click="go_detail(plist2.id,plist2.aid,pidx)"
                                                    v-for="(plist2,pidx) in p.plist2" :key="pidx">
                                                    <div class="reward">
                                                        <div>{{plist2.prize}}</div>
                                                    </div>
                                                    <div class="name">{{plist2.name}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>

                    <div class="touch" :class="lang"></div>

                </div>
            </div>
        </div>


        <!--获奖人-->
        <div class="section" id="scene-3" v-show="scene == 3">
            <div class="warp">
                <div class="content">

                    <div class="back" @click="change_scene(2)"></div>
                    <div class="music"></div>

                    <div class="pep-box" id="pep-box" v-if="pep_info_index != -1">
                        <div class="like" @click.stop="zan(alist[pep_info_index].id)">
                            <div class="ico"></div>
                            <div class="num">{{alist[pep_info_index].zan}}</div>
                        </div>
                        <img class="avatar" v-if="alist" :src="alist[pep_info_index].photo">
                        <div class="name">
                            <div class="name-text">{{alist[pep_info_index].name}}</div>

                            <div class="dept">{{alist[pep_info_index].dept}}{{alist[pep_info_index].dept2 != '' ? ' - '+alist[pep_info_index].dept2 : ''}}</div>
                            <!-- <div class="dept2" v-show="alist[pep_info_index].dept2 != ''">
                                {{alist[pep_info_index].dept2}}</div> -->
                        </div>
                        <div class="depict">
                            {{alist[pep_info_index].prize}}
                        </div>
                        <div class="reason">
                            <div class="hd">{{lang == 'cn' ? '获奖原因' : 'Award-winning Behaviors'}}</div>
                            <div class="bd scroll-wrap">{{alist[pep_info_index].prize_info == '' ? '暂无' :
                                alist[pep_info_index].prize_info}}
                            </div>
                        </div>
                        <a :href="alist[pep_info_index].home_page" class="go-pep-page" :class="lang"
                            v-show="alist[pep_info_index].home_page != ''"></a>


                        
                    </div>
                    <div class="swiper-arr"></div>
                    <div class="create-btn" @click.stop="go_edit(alist[pep_info_index].id)">{{lang == 'cn' ? '点击生成个性相框' : 'DIY the frame'}}</div>
                    

                   
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>



                </div>
            </div>
        </div>

        <!--编辑页-->
        <div class="section" id="scene-4" v-show="scene == 4">
            <div class="warp">
                <div class="content">
                    <div class="back" @click="change_scene(3)"></div>
                    <div class="music"></div>
                    <div id="photo-box" class="photo-box style-1">
                        <img class="photo" :src="person.photo" alt="" srcset="">
                        <img class="border-box" src="" alt="">
                    </div>




                    <div class="edit-box">
                        <div class="box">
                            <div class="lable">
                                <div class="ico border"></div>
                                <div class="name">{{lang == 'cn' ? '边框' : 'Frame'}}</div>
                            </div>
                            <div class="scroll-view">
                                <!-- <div data-style="style-1" class="border-style style-1"></div>
                                <div data-style="style-2" class="border-style style-2"></div>
                                <div data-style="style-3" class="border-style style-3"></div>
                                <div data-style="style-4" class="border-style style-4"></div>
                                <div data-style="style-5" class="border-style style-5"></div>
                                <div data-style="style-6" class="border-style style-6"></div>
                                <div data-style="style-7" class="border-style style-7"></div> -->
                                <img class="edit-border" src="img/border-1.png?1" alt="">
                                <img class="edit-border" src="img/border-2.png?1" alt="">
                                <img class="edit-border" src="img/border-3.png?1" alt="">
                                <img class="edit-border" src="img/border-4.png?1" alt="">
                                <img class="edit-border" src="img/border-5.png?1" alt="">
                                <img class="edit-border" src="img/border-6.png?1" alt="">
                                <img class="edit-border" src="img/border-7.png?1" alt="">
                                <img class="edit-border" src="img/border-8.png?1" alt="">
                                <img class="edit-border" src="img/border-9.png?1" alt="">
                                <img class="edit-border" src="img/border-10.png?1" alt="">
                                <img class="edit-border" src="img/border-11.png?1" alt="">
                                <img class="edit-border" src="img/border-12.png?1" alt="">
                                <img class="edit-border" src="img/border-13.png?1" alt="">
                            </div>
                        </div>
                        <div class="box" id="tietu">
                            <div class="lable">
                                <div class="ico face"></div>
                                <div class="name">{{lang == 'cn' ? '贴纸' : 'Sticker'}}</div>
                            </div>
                            <div class="scroll-view">
                                <img class="tz-style" data-id="1" src="img/tz-1.png?1">
                                <img class="tz-style" data-id="2" src="img/tz-2.png?1">
                                <img class="tz-style" data-id="3" src="img/tz-3.png?1">
                                <img class="tz-style" data-id="4" src="img/tz-4.png?1">
                                <img class="tz-style" data-id="5" src="img/tz-5.png?1">
                                <img class="tz-style" data-id="6" src="img/tz-6.png?1">
                                <img class="tz-style" data-id="7" src="img/tz-7.png?1">
                                <img class="tz-style" data-id="8" src="img/tz-8.png?1">
                                <img class="tz-style" data-id="9" src="img/tz-9.png?1">
                                <img class="tz-style" data-id="10" src="img/tz-10.png?1">
                                <!-- <img class="tz-style" data-id="11" src="img/tz-11.png">
                                <img class="tz-style" data-id="12" src="img/tz-12.png"> -->
                            </div>
                        </div>
                        <div class="create-ok" :class="lang"></div>
                    </div>

                    <div class="pep-info">
                        <div class="name-info">
                            <div class="name">{{person.name}}</div>
                            <div class="department">{{person.dept}}</div>
                        </div>
                        <div class="prize">
                            {{person.prize}}
                        </div>
                        <div class="prize-info">
                            {{person.prize_info}}

                        </div>
                        <!-- <div class="item">
                            <div class="name">{{person.name}}</div>
                            <div class="department">{{person.dept}}</div>
                            <div class="dept2">{{person.dept2}}</div>
                        </div>
                        <div class="item depict">
                            {{person.prize}}
                        </div>
                        <div class="item depict">
                            {{person.prize_info}}
                        </div> -->
                        <!-- <div class="save"></div> -->
                    </div>


                </div>
            </div>
        </div>




    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/transit.js"></script>
    <script src="lib/swiper.min.js"></script>
    <script src="lib/touch.js"></script>
    <script src="lib/request.js?2"></script>
    <script>

        var APPID = GetQueryString('appid');

        //生成个人ID保存到缓存
        if (!window.localStorage.getItem('openid')) {
            var openid = (Math.random() * 10000000).toString(16).substr(0, 4) + (new Date()).getTime() + Math.random().toString().substr(2, 5);
            window.localStorage.setItem("openid", openid);
        }

        var BASE_URL = 'img/'
        var resource = [
            BASE_URL + 'arr_bottom.png',
            BASE_URL + 'arr_top.png',
            BASE_URL + 'back.png',
            BASE_URL + 'create-btn.png',
            BASE_URL + 'create-ok.png',
            BASE_URL + 'face.png',
            BASE_URL + 'go-pep-page.png',
            BASE_URL + 'hart.png',
            BASE_URL + 'logo.png',
            BASE_URL + 'remove.png',
            BASE_URL + 'rotate.png',
            BASE_URL + 's1-cn-btn.png',
            BASE_URL + 's1-en-btn.png',
            BASE_URL + 's1-title.png',
            BASE_URL + 's2-title.png',
            BASE_URL + 'swiper-arr.png',
            BASE_URL + 'touch.png',
            BASE_URL + 'tz-1.png',
            BASE_URL + 'tz-2.png',
            BASE_URL + 'tz-3.png',
            BASE_URL + 'tz-4.png',
            BASE_URL + 'tz-5.png',
            BASE_URL + 'tz-6.png',
            BASE_URL + 'tz-7.png',
            BASE_URL + 'tz-8.png',
            BASE_URL + 'tz-9.png',
            BASE_URL + 'tz-10.png',
            BASE_URL + 'tz-11.png',
            BASE_URL + 'tz-12.png',
            BASE_URL + 'bg.jpg',
            BASE_URL + 'pep-bg.png',
            BASE_URL + 'swiper-slide-bg.png',
            BASE_URL + 'pep-info.png',
        ]


        var app = new Vue({
            el: '#app',
            data: {
                scene: -1,
                bg_img: '',
                logo_img: '',
                title: '',
                sub_title: '',
                personal_id: '',
                select_years: [],
                selected: '',
                banner1: [],
                banner_swiper_current: 0,
                banner2: [],
                banner3: [],
                rosters: [],
                swiper_current: 0,
                alist: [],
                person: '',
                pep_info_index: -1,
                initLang : '',
                lang : ''
            },
            created: function () {




            },

            mounted: function () {

                var that = this;


                request(API.lang,{
                    appid: APPID,
                },function(res){
                    that.initLang = res.data.lang;

                    if(that.initLang == 'en'){
                        that.lang = 'en'
                    }else{
                        that.lang = 'cn'
                    }

                    request(API.config, {
                        appid: APPID,
                        openid: window.localStorage.getItem('openid'),
                        lang : that.lang
                    }, function (res) {

                        that.bg_img = res.data.bg_img
                        that.logo_img = res.data.logo

                        if (res.data.bg_img == '') {
                            that.bg_img = 'img/bg.jpg'
                        } else {
                            that.bg_img = res.data.bg_img
                        }

                        if (res.data.logo == '') {
                            that.logo_img = 'img/logo.png'
                        } else {
                            that.logo_img = res.data.logo
                        }

                        that.title = res.data.title;
                        that.sub_title = res.data.sub_title;


                        that.scene = 0;


                        var resLoad = function (a, b) { var c = b || {}; this.source = a, this.count = 0, this.total = a.length, this.onload = c.onload, this.prefix = c.prefix || "", this.version = "?v=" + (c.version || "0.0.1"), this.init() }; resLoad.prototype.init = function () { var a = this; a.source.forEach(function (b) { var c = b.substr(b.lastIndexOf(".") + 1).toLowerCase(), d = a.prefix + b + a.version; switch (c) { case "js": a.script.call(a, d); break; case "css": a.stylesheet.call(a, d); break; case "jpg": case "gif": case "png": case "jpeg": a.image.call(a, d) } }) }, resLoad.prototype.getProgress = function () { return Math.floor(this.count / this.total * 100) }, resLoad.prototype.image = function (a) { var b = document.createElement("img"); this.load(b, a), b.src = a }, resLoad.prototype.stylesheet = function (a) { var b = document.createElement("link"); this.load(b, a), b.rel = "stylesheet", b.type = "text/css", b.href = a, document.head.appendChild(b) }, resLoad.prototype.script = function (a) { var b = document.createElement("script"); this.load(b, a), b.type = "text/javascript", b.src = a, document.head.appendChild(b) }, resLoad.prototype.load = function (a, b) { var c = this; a.onload = a.onerror = a.onabort = function (a) { c.onload && c.onload({ count: ++c.count, total: c.total, item: b, type: a.type }) } };
                        new resLoad(resource, {
                            onload: function (load) {
                                var count = load.count
                                var total = load.total
                                
                                if (count === total) {

                                    request(API.banner, {
                                        appid: APPID,
                                        lang : that.lang,
                                    }, function (res) {

                                        that.banner1 = res.data.banner1;
                                        that.banner2 = res.data.banner2;
                                        that.banner3 = res.data.banner3;

                                        that.change_scene(1)

                                    })


                                }
                            },
                            version: '0.0.1'
                        })


                    })



                })


                




                


            },

            methods: {


                change_scene: function (id, pid, aid) {
                    var that = this;

                    if (id == 1) {
                        /*档案馆 start*/
                        this.$nextTick(function () {
                            that.mySwiper_banner = new Swiper('#swiper-banner', {
                                pagination: {
                                    el: '.swiper-pagination',
                                },
                                watchOverflow: true,
                                observer: true,
                                observeParents: true,
                                on: {
                                    slideChangeTransitionEnd: function () {
                                        that.banner_swiper_current = this.activeIndex;
                                        console.log(that.banner_swiper_current)
                                    },
                                }
                            })
                            that.rosters = []
                        })
                        /*档案馆 end*/
                    }

                    if (id == 2) {

                        console.log(111111111111)
                        console.log(that.select_years.length)

                        if (that.select_years.length <= 0) {
                            request(API.years, {
                                appid: APPID,
                                lang : that.lang
                            }, function (res) {
                                that.select_years = res.data;
                                that.selected = res.data[0]
                                console.log(res)
                            })
                        }


                        if (that.rosters.length <= 0) {
                            request(API.plist, {
                                appid: APPID,
                                lang : that.lang
                            }, function (res) {
                                console.log(res)
                                that.rosters = res.data;

                                if(that.rosters.length > 1){
                                    $('.touch').show()
                                }else{
                                    $('.touch').hide()
                                }

                                /*获奖名单 start*/
                                that.mySwiper_department = new Swiper('#swiper-department', {
                                    slidesPerView: 'auto',
                                    centeredSlides: true,
                                    loopedSlides: 3,
                                    watchOverflow: true,
                                    initialSlide: that.rosters.length - 1,
                                    observer: true,
                                    observeParents: true,
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                    on: {
                                        slideChangeTransitionEnd: function () {
                                            //console.log(this.activeIndex)
                                            console.log(this.activeIndex)
                                            that.swiper_current = this.activeIndex;
                                        },
                                        observerUpdate: function () {
                                            that.mySwiper_department.slideTo(that.rosters.length, 500, false);
                                        }
                                    }
                                })

                                //that.swiper_current = that.rosters.length-1
                            })
                        }


                    }



                    this.scene = id;
                },
                go_detail: function (pid, aid, index) {

                    var that = this;

                    request(API.alist, {
                        appid: APPID,
                        aid: aid,
                        id: pid
                    }, function (res) {
                        that.aid = aid;
                        that.alist = res.data;
                        console.log(that.alist);




                        for (let i = 0; i < that.alist.length; i++) {
                            if (that.alist[i].id == pid) {

                                that.pep_info_index = i;
                                console.log(pid, that.pep_info_index);
                                //mySwiper_pep.slideTo(i, 500, false);
                                break
                            }
                        }
                        that.scene = 3;




                        $('body').on('touchstart', '.scroll-wrap', function (e) {
                            flag = true;
                            console.log(flag)
                            e.stopPropagation()
                        })

                        $('body').on('touchend', '.scroll-wrap', function (e) {
                            flag = false;
                            console.log(flag)

                        })







                        // that.scene = 3;

                    })






                },
                go_edit: function (id) {

                    var that = this;

                    for (var i = 0; i < that.alist.length; i++) {
                        if (that.alist[i].id == id) {
                            that.person = that.alist[i];
                            break;
                        }
                    }

                    // $('.pep-info').show();
                    // $('.edit-box').hide();
                    // $('#photo-box').addClass('pos')


                    that.scene = 4;

                },
                zan: function (id) {

                    var that = this;
                    request(API.zan, {
                        appid: APPID,
                        aid: that.aid,
                        id: id,
                        openid: window.localStorage.getItem('openid')
                    }, function (res) {
                        if (res.code == 1) {
                            that.alist[that.pep_info_index].zan += 1
                        }
                    })

                },
                getSelectYear: function (year) {
                    console.log(year)
                    var that = this;
                    request(API.plist, {
                        appid: APPID,
                        year: year
                    }, function (res) {
                        console.log(res)

                        that.rosters = res.data;
                        that.swiper_current = that.rosters.length - 1
                        console.log(that.swiper_current)
                        that.mySwiper_department.update();

                    })
                },
                change_lang: function () {

                    var that = this;

                    this.lang = this.lang == 'cn' ? this.lang = 'en' : this.lang = 'cn';


                    request(API.config, {
                        appid: APPID,
                        openid: window.localStorage.getItem('openid'),
                        lang : this.lang
                    }, function (res) {

                        that.bg_img = res.data.bg_img
                        that.logo_img = res.data.logo

                        if (res.data.bg_img == '') {
                            that.bg_img = 'img/bg.jpg'
                        } else {
                            that.bg_img = res.data.bg_img
                        }

                        if (res.data.logo == '') {
                            that.logo_img = 'img/logo.png'
                        } else {
                            that.logo_img = res.data.logo
                        }

                        that.title = res.data.title;
                        that.sub_title = res.data.sub_title;
                        
                    })

                    request(API.banner, {
                        appid: APPID,
                        lang : this.lang
                    }, function (res) {
                        console.log(res.data.banner1)
                        //console.log(res.data.banner.banner1)
                        that.banner1 = res.data.banner1;
                        that.banner2 = res.data.banner2;
                        that.banner3 = res.data.banner3;

                    })


                    console.log(this.lang)
                    // alert('英文版正在紧张开发中，即将上线')
                }
            }
        })


        var dir = '';

        var flag = false;


        touch.on('#scene-3', 'touchmove', function (ev) {
            if (!flag) {
                ev.preventDefault()
            }
        });


        touch.on('#scene-3', 'swipeup swipedown', function (ev) {

            if (ev.type == 'swipeup') {

                swiper('swipeup')


            } else if (ev.type == 'swipedown') {
                swiper('swipedown')

            }
            dir = ev.type;
        });

        $('#scene-3 .swiper-button-next').on('click',function(){
            swiper('swipedown')
            dir = 'swipedown';
        })

        $('#scene-3 .swiper-button-prev').on('click',function(){
            swiper('swipeup')
            dir = 'swipeup';
        })



        function swiper(dir){
            if(dir == 'swipeup'){
                if (app.$data.pep_info_index >= app.$data.alist.length - 1) return;

                app.$data.pep_info_index++;

                console.log(app.$data.pep_info_index)

                $('#pep-box').addClass('animate__animated animate__fadeOutUp animate__faster');
            }else{
                if (app.$data.pep_info_index <= 0) return;
                app.$data.pep_info_index--;
                console.log(app.$data.pep_info_index)

                $('#pep-box').addClass('animate__animated animate__fadeOutDown animate__faster');
            }
        }


        $('body').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', '#pep-box', function () {
            if (dir == 'swipeup') {
                $('#pep-box').removeClass().addClass('pep-box').addClass('animate__animated animate__fadeInUp animate__faster');
            } else if (dir == 'swipedown') {
                $('#pep-box').removeClass().addClass('pep-box').addClass('animate__animated animate__fadeInDown animate__faster');
            }

        });

        /*获奖人 start*/
        // var mySwiper_pep = new Swiper('#swiper-pep', {
        //     direction: 'vertical',
        //     noSwipingClass: 'scroll-wrap',
        //     lazy: {
        //         loadPrevNext: true,
        //     },
        //     freeMode: false,
        //     speed: 500,
        //     followFinger: false,
        //     observer: true,
        //     observeParents: true
        // })
        /*获奖人 end*/






        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        (function () {
            window.alert = function (name) {
                var iframe = document.createElement("IFRAME");
                iframe.style.display = "none";
                iframe.setAttribute("src", 'data:text/plain');
                document.documentElement.appendChild(iframe);
                window.frames[0].window.alert(name);
                iframe.parentNode.removeChild(iframe);
            }
        })();

        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            $('.swiper-button-next,.swiper-button-prev').hide()
        }
        else {
            /*window.location.href="你的电脑版地址";    */
            //alert("请在移动端观看");
            $('body').addClass('pc-bg');
            $('.touch,.swiper-arr,#tietu').hide();
        }


    </script>
    <script src="common.js?522"></script>

    


    <!-- <script src="inpMusic.js"></script> -->

</body>

</html>